<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="wrapper">
        <div class="panel layui-panel" style="padding: 20px;">
            <form class="layui-form" id="form" lay-filter="form">
                <div class="layui-form-item">
                    <div class="layui-input-group" style="width: 100%;">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                        <div class="layui-input-prefix" style="padding: 0; width: 70px;">
                            <button class="layui-btn layui-btn-normal" id="save" lay-filter="save" lay-submit>新增</button>
                        </div>
                    </div>
                </div>
            </form>

            <table class="layui-hide" id="table" lay-filter="table"></table>

            <script type="text/html" id="OPE">
                <a lay-event="del">删除</a>
            </script>
        </div>
    </div>
</body>
</html>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(function() {
    var $ = layui.jquery,
        element = layui.element,
        form = layui.form,
        table = layui.table;

    table.render({
        id: 'table',
        elem: '#table',
        url: "{:url('admin/link/linkclass')}",
        method: 'post',
        toolbar: false,
        defaultToolbar: ['filter', 'exports', 'print'],
        page: false,
        cols: [[
            // {type:'checkbox', fixed: 'left'},
            {field: 'id', title: 'ID', width: 80, align: 'center'},
            {field: 'name', title: '名称', edit: 'text'},
            {title: '操作', width: 60, fixed: 'right', templet: '#OPE', align: 'center'}
        ]],
        height: 'full-140',
        skin: 'line',
        // done: function (res, curr, count, origin) {
        //     table.resize('table');
        // }
    });

    table.on('edit(table)', function(obj) {
        var loadIndex = layer.load();
        $.post("{:url('admin/link/linkclasssave')}", {'id': obj.data.id, 'name': obj.value}, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                table.reloadData('table');
            }
        });
    });

    table.on('tool(table)', function (obj) {
        if (obj.event === 'del') {
            layer.confirm('确定要删除此链接分类吗？', {icon: 3}, function (index) {
                var loadIndex = layer.load();
                $.post("{:url('admin/link/linkclassdel')}", {'id': obj.data.id}, function(res) {
                    layer.close(loadIndex);
                    if (res.code > 0) {
                        layer.alert(res.msg, {icon: 2});
                    } else {
                        layer.msg(res.msg, {time: 500});
                        table.reloadData('table');
                    }
                });
                layer.close(index);
            });
        }
    });

    form.on('submit(save)', function(obj) {
        var postData = obj.field;
        var loadIndex = layer.load();
        $.post("{:url('admin/link/linkclasssave')}", postData, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                table.reloadData('table');
                document.getElementById('form').reset();
            }
        });
        return false;
    });  
});
</script>